<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>主页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">

</head>
<body style="background-color: #e6e7e6">

<div>
    <!-- 内容主体区域 -->
    <div id="article" style="padding: 50px;" v-show="flag==true">
        <br>
        <blockquote class="layui-elem-quote" style="border-left: 5px solid #f6f4f4;" v-for="(item,index) in article" >
            <a href="#"  v-on:click="showarticle(index)">
                <h3>{{item.articleTitle}}</h3>
            </a>
            <p style="font-size: 15px;color: #9fa79f">{{item.articleGreat}}赞</p>
            <br>
        </blockquote>
    </div>

    <div id="showarticle" style="padding: 20px;" v-show="flag==true">
        <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" v-on:click="back()">
            <i class="layui-icon">&#xe603;</i>
        </button>
        <h1 id="title" align="center"></h1>
        <div id="content">
        </div>
        <br><br>

        <button style="width: 50px; height: 50px; float:right;margin-right: 70px;" class="layui-btn layui-btn-sm layui-btn-primary" v-on:click="great()">
            <i id="great" class="layui-icon" style="color: #150b0b;font-size: 30px;">&#xe6c6;</i>
        </button>

        <button style="width: 50px; height: 50px; float:right;margin-right: 30px;" class="layui-btn layui-btn-sm layui-btn-primary">
            <i id="collection" class="layui-icon" style="color: #150b0b">&#xe600;</i>
        </button>

    </div>
</div>
<script src="/layui/layui.js" charset="utf-8"></script>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="/js/home.js" charset="utf-8"></script>
</body>
</html>